<template>
	<view class="order-express">
		<view class="order-express-card">
			<view class="order-state">
				<view class="order-state-left">
					<image 
						src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/my/order-status-3.jpg">
					</image>
					<text>订单跟踪</text>
				</view>
				<view class="order-state-right">订单进度：<text>{{currentIndex}}</text>/{{order_express_list.length}}</view>
			</view>
			<view class="order-express-timeline">
				<u-time-line>
					<u-time-line-item nodeTop="2" v-for="(data,index) in order_express_list" :key="index">
						<template v-slot:node>
							<view class="u-node" :class="{active: data.status==1}">
								<!-- <text v-if="index==0">收</text> -->
								<text>{{data.step}}</text>
							</view>
						</template>
						<template v-slot:content>
							<view class="line" v-if="data.status==1 && index!=order_express_list.length-1"></view>
							<view class="u-order-title" :class="{active: data.status==1}">{{data.desc}} <!-- <text v-if="index==0">{{data.phone}}</text> --></view>
							<view v-for="(item,i) in data.order_goods_express" :key="i" style="display: flex;">
								<view class="u-order-desc" :class="{active: data.status==1}" style="flex: 1; margin-right: 20rpx;">{{item.desc}}</view>
								<view class="u-order-time">{{item.add_time}}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_express_list: [],
				currentIndex: 0
			};
		},
		onLoad(options) {
			this.order_express_list = JSON.parse(options.order_express_list)
			this.order_express_list.forEach((item,index) => {
				if(item.status==1){
					this.currentIndex++
				}
				// switch (item.step){
				// 	case '已下单':
				// 		if(index==0){
				// 			this.$set(item,'icon','https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/express/01_hover.png')
				// 		}else{
				// 			this.$set(item,'icon','https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/express/01.png')
				// 		}
				// 		break;
				// 	case '商家已确认':
				// 		if(index==0){
				// 			this.$set(item,'icon','https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/express/02_hover.png')
				// 		}else{
				// 			this.$set(item,'icon','https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/express/02.png')
				// 		}
				// 		break;
				// 	case '总部已确认':
				// 		if(index==0){
				// 			this.$set(item,'icon','https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/express/03_hover.png')
				// 		}else{
				// 			this.$set(item,'icon','https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/express/03.png')
				// 		}
				// 		break;
				// 	case '工厂已确认':
				// 		if(index==0){
				// 			this.$set(item,'icon','https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/express/04_hover.png')
				// 		}else{
				// 			this.$set(item,'icon','https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/express/04.png')
				// 		}
				// 		break;
				// 	case '已揽件':
				// 		if(index==0){
				// 			this.$set(item,'icon','https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/express/05_hover.png')
				// 		}else{
				// 			this.$set(item,'icon','https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/express/05.png')
				// 		}
				// 		break;
				// 	case '已出库':
				// 		if(index==0){
				// 			this.$set(item,'icon','https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/express/06_hover.png')
				// 		}else{
				// 			this.$set(item,'icon','https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/express/06.png')
				// 		}
				// 		break;
				// 	case '已签收':
				// 		if(index==0){
				// 			this.$set(item,'icon','https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/express/07_hover.png')
				// 		}else{
				// 			this.$set(item,'icon','https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/express/07.png')
				// 		}
				// 		break;
				// }
			})
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f9f9f9;
	}
	.order-express{
		padding: 30rpx;
		.order-express-card{
			background-color: #FFF;
		}
		.order-express-timeline{
			padding: 30rpx 40rpx;
			/deep/ .u-time-axis{
				&::before{
					border-left-width: 8rpx;
					bottom: 0;
				}
			}
			/deep/ .u-time-axis-node{
				left: -38rpx;
			}
			/deep/ .u-time-axis-item{
				padding-bottom: 50rpx;
				margin-bottom: 0;
				.line{
					position: absolute;
					content: '';
					width: 4rpx;
					height: 100%;
					left: -20px;
					top: 10rpx;
					background-color: #F59359;
				}
			}
			/deep/ .u-time-axis-item.active{
				margin-bottom: 0;
				padding-bottom: 30rpx;
			}
		}
		.order-state {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #757575;
			padding: 30rpx;
			border-bottom: solid 1px #F2F2F2;
			.order-state-left{
				image {
					width: 44rpx;
					height: 44rpx;
				}
				text {
					margin-left: 22rpx;
					line-height: 44rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #000000;
				}
			}
			.order-state-right{
				text{
					color: #141414;
					font-weight: bold;
				}
			}
		}
	}
	
	.u-node {
		width: 47rpx;
		height: 41rpx;
		line-height: 41rpx;
		border-radius: 100rpx;
		background-image: url(https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/my/order-step.png);
		background-size: cover;
		color: #FFF;
		padding-left: 14rpx;
		background-repeat: no-repeat;
		&.active{
			color: #FFF;
			background-image: url(https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/my/order-step-hover.png);
			background-size: cover;
		}
		&.address{
			width: 47rpx;
			height: 47rpx;
			padding: 0;
			text-align: center;
			line-height: 47rpx;
			background-image: none;
			background-color: #999;
		}
	}
	
	.u-order-title {
		color: #999;
		font-weight: bold;
		font-size: 28rpx;
		&.active{
			color: #141414;
		}
		text{
			margin-left: 20rpx;
		}
	}
	
	.u-order-desc {
		color: #999;
		font-size: 24rpx;
		padding: 10rpx 0;
		&.active{
			color: #757575;
		}
	}
	
	.u-order-time {
		color: #A4A4A4;
		font-size: 26rpx;
	}
</style>